<template>
  <div>
    <div class="graybg"></div>
    <div class="header header_bg">
      <div class="header_left">
        <i onclick="javascript:history.back(-1)" class="iconfont baiColor">&#xe612;</i>
      </div>
      <div class="header_center">
        <span class="baiColor">设置</span>
      </div>
    </div>

    <div class="center" style="padding-top: 47px;">
      <section>
        <p class="pull-left">
          <i class="iconfont">&#xe681;</i>
          <span>复引设置</span>
        </p>
        <p class="pull-right">
          <span class="info1">{{info1}}</span>
          <span class="info2" @click="relat" :class="isActive === true ? 'active' : 'nos' ">
                <b class="b" :class="lefted === true ? 'lefted' : 'no' "></b>
          </span>
        </p>
      </section>
    </div>
  </div>

</template>

<script>
  export default {
    data() {
      return {
        isActive: true,
        info1: '',
        lefted:true
      }
    },
    mounted: function () {
      var params = new URLSearchParams();
      var info = window.localStorage.data;
      this.$axios({
        url: '/One/Fun/afterQuote',
        method: "GET",
        params: {
          token: info
        }
      }).then((res) => {
        if (res.data.status == 1) {
          if (res.data.data.u_aquote == 1) {
            this.info1 = '已开启';
              this.lefted = true;
              this.isActive = true
          } else {
            this.info1 = '已关闭';
              this.lefted = false;
              this.isActive = false
          }
        }
      }).catch((err) => {
        console.log(err)
      })

    },
    methods: {
      relat: function () {
        var params = new URLSearchParams();
        var info = window.localStorage.data;
        this.isActive = !this.isActive;
        if (this.isActive == false) {
          this.info1 = '已关闭'
          params.append("token", info); //客户秘钥（信息）
          params.append("type", 0);
          this.$axios({
            url: "One/Fun/afterQuote",
            method: "POST",
            data: params
          }).then((res) => {
            if(res.data.status == 1){
                alert('更改成功')
            }else if(res.data.status ==0){
              alert('更改失败')
            }
          }).catch(function (err) {
            console.log(err)
          })
        } else if (this.isActive == true) {
          this.info1 = '已开启'
          params.append("token", info); //客户秘钥（信息）
          params.append("type", 1);
          this.$axios({
            url: "One/Fun/afterQuote",
            method: "POST",
            data: params
          }).then((res) => {
            if(res.data.status == 1){
              alert('更改成功')
            }else if(res.data.status ==0){
              alert('更改失败')
            }
          }).catch(function (err) {
            console.log(err)
          })
        }
        if (this.lefted == false) {
          this.lefted = true;
        } else if (this.lefted == true) {
          this.lefted = false;
        }
      }
    },

  }
</script>

<style scoped="scoped">
  @import "../css/public.css";
  /*控制椭圆*/
  .active {
    background: #F3961F !important;
  }

  .nos {
    background: #fff !important;
  }

  /*控制小圆*/
  .lefted {
    left: 20px !important;
  }

  .no {
    background: #F3961F !important;
  }

  .center {
    width: 95%;
    margin: 0 auto;
  }

  .center section {
    overflow: hidden;
    color: #333;
    font-size: 18px;
    background: #fff;
    height: 44px;
    line-height: 44px;
  }

  .center section p i {
    width: 22px;
    height: 21px;
  }

  .center section .pull-left i {
    padding: 0 10px;
    color: #F3961F;
  }

  .center section .pull-right {
    padding-right: 10px;
    height: 44px;
    line-height: 44px;
  }

  .center section .info1 {
    font-size: 12px;
    color: #666;
    display: inline-block;
  }

  .center section .info2 {
    display: inline-block;
    width: 50px;
    height: 30px;
    border: solid 1px #F3961F;
    border-radius: 20px;
    position: relative;
    background: #F3961F;
    margin-top: 5px;
  }

  .center section .info2 b {
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #fff;
    position: absolute;
  }
</style>
